<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/vue.js"></script>
    <script src="/js/axios.js"></script>
    <script src="/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">

    <style>

        .bg{
            padding-bottom: 10px;
            overflow: auto;
        }

    </style>
</head>
<body>

<div id="app">

    <el-row class="bg">
        <el-input style="width:30%">

        </el-input>

        <el-button type="primary" icon="el-icon-search" @click="">
            查询
        </el-button>
    </el-row>

    <el-row class="bg">

        <el-button @click="handAddBuild" type="primary">
            添加
        </el-button>

        <el-button type="danger" @click="delRows">
            删除
        </el-button>

        <el-button type="primary">
            excel导入
        </el-button>

        <el-button type="primary" @click="delRows">
            excel导出
        </el-button>

    </el-row>

   <!--
          type="selection"
          type 都是类型   selection 选择框
          @selection-chang  选择时间   选择触发 右边的函数
    -->
    <el-table
            :data="builds"
            border
            style="width: 100%"
            @selection-change="handleSelectionChange"
    >

        <el-table-column
                type="selection"
                width="55">
        </el-table-column>

        <el-table-column
                align="center"
                prop="id"
                label="编号"
                width="180">
        </el-table-column>
        <el-table-column
                align="center"
                prop="numbers"
                label="楼栋"
                width="180">
        </el-table-column>

        <el-table-column
                align="center"
                prop="uints"
                label="单元"
                width="180">
        </el-table-column>

        <el-table-column
                align="center"
                prop="remarks"
                label="备注"
                width="180">
        </el-table-column>

        <el-table-column label="操作" align="center">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>

        <!--
            分页操作:

             前端: 组件
                 <el-pagination> 组件标签
                        @size-change      页面大小的触发事件(触发函数(handleSizeChange))
                        @current-change   当前页面变化触发事件(触发函数(handleCurrentChange))
                        :current-page     当前第几页
                        :page-sizes       每页大小
                        :page-size        每页大小
                        :current-page     当前第几页
                        layout            分页布局
                        :total            一共多少条数据
                        服务器需要给我们返回的数据:
                        total   总数
                        builds  每页展示的数据
                        后端需要哪些数据:
                        currentPage:需要当前的页
                        pageSize:   需要每页的数据大小
             后端: 插件
                 01 依赖
                 02 配置
        -->
    </el-table>
    <div class="block">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>

    <!--    编辑的 dialog -->
    <el-dialog
            title="编辑楼宇"
            :visible.sync="dialogVisible"
            width="45%"
            :before-close="handleClose">

        <el-form ref="build" label-width="80px">
            <el-form-item label="楼栋">
                <el-input v-model="build.numbers"></el-input>
            </el-form-item>

            <el-form-item label="单元">
                <el-input v-model="build.uints"></el-input>
            </el-form-item>

            <el-form-item label="备注">
                <el-input v-model="build.remarks"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmitUpdate">添加</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>


<!--    @close="handleCloseLintener"
        关闭触发的函数
        dialog关闭后 会触发 close的事件 执行 右边的函数
-->
    <el-dialog
            title="添加楼宇"
            :visible="addDialogVisible"
            width="45%"
            @close="handleCloseLintener"
            :before-close="handleClose">

        <el-form ref="addBuild" label-width="80px">
            <el-form-item label="楼栋">
                <el-input v-model="addBuild.numbers"></el-input>
            </el-form-item>

            <el-form-item label="单元">
                <el-input v-model="addBuild.uints"></el-input>
            </el-form-item>

            <el-form-item label="备注">
                <el-input v-model="addBuild.remarks"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmitAdd">添加</el-button>
                <el-button @click="addDialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</div>

<script>
    let app = new Vue({
        el:"#app",
        data:{
            builds:[],
            currentPage:1,
            pageSizes:[2,3,4],
            pageSize:2,
            total:0,
            dialogVisible:false,
            build:{},
            addBuild:{},  //添加的对象
            addDialogVisible:false,
            multipleSelection: []  // 勾选的数组对象
        },
        methods:{

            //批量删除
            delRows(){

                //判断 不能没有选中数据
                if (this.multipleSelection.length ==0 ){
                    //提示不能为null
                    this.$message({
                        message:"不能没有选中数据",
                        type: 'info'
                    });
                    return;
                }
                let ids = [];

                //把选中的 数据的id都存储到一个数组中
                for(let i = 0 ; i < this.multipleSelection.length ; i++){
                    ids.push(this.multipleSelection[i].id)
                }
                console.log(ids);

                /**
                 *    如果是get请求
                 *    请求参数通过 params 提交到服务器 都在url上面 服务器使用  直接参数你绑定 (@RequestParam)
                 *
                 *    如果是POST/PUT请求
                 *    请求参数通过  data 把json对象发送到 服务器 ,服务器使用 @RequestBody 接受参数(把json对象转成java对象 )
                 *
                 *    get/delete 路径传递参数
                 *    http://localhost:8080/ssm/build/6   服务器通过 @PathVariable来获取 路径参数
                 */
                //发送请求 把ids 发送到服务器
                axios({
                    method:"DELETE",
                    url:"http://localhost:8080/ssm/build",
                    data:ids
                }).then(resp=> {
                    // 01 判断
                    // 02 提示 信息
                    // 03 页面刷新数据
                    if (resp.data.code == 100000){
                        this.$message({
                            message:"批量" + resp.data.msg,
                            type: 'success'
                        });
                        //刷新数据
                        this.findBuilds(this.currentPage,this.pageSize);
                    }
                })
            },
            // 勾选触发的函数
            handleSelectionChange(val){
                //val 勾选的数组对象
                this.multipleSelection = val;
                console.log(val);
            },
            // dialog 关闭后触发的函数
            // 可以把 addBuild 清空
            handleCloseLintener(){
                this.addBuild = {}
            },
            //添加的提交操作
            onSubmitAdd(){
                //发送请求 提交 数据
                axios({
                    method:"POST",
                    url:"http://localhost:8080/ssm/build",
                    data:this.addBuild
                }).then(resp=>{
                    //数据回写
                    console.log(resp.data);

                    //01 判断 是否添加成功
                    //02 信息提示
                    //03 关闭dialog
                    //04 页面刷新
                    if (resp.data.code == 100000){
                        this.$message({
                            message:"添加" + resp.data.msg,
                            type: 'success'
                        });
                        //刷新数据
                        this.findBuilds(this.currentPage,this.pageSize);
                        // 关闭 dialog
                        this.addDialogVisible = false;
                    }

                })
            },
            // 添加的点击 弹出模态窗
            handAddBuild(){
                this.addDialogVisible = true;
            },

            // 模态窗的关闭操作
            handleClose(){
                this.dialogVisible = false;
                this.addDialogVisible = false;
            },
            // 提交更新的操作
            onSubmitUpdate(){
                //发送请求 提交 数据
                axios({
                    method:"PUT",
                    url:"http://localhost:8080/ssm/build",
                    data:this.build
                }).then(resp=>{
                    //数据回写
                    console.log(resp.data);

                    //01 判断 是否修改成功
                    //02 信息提示
                    //03 关闭dialog
                    //04 页面刷新
                    if (resp.data.code == 100000){
                        this.$message({
                            message:"修改" + resp.data.msg,
                            type: 'success'
                        });
                        //刷新数据
                        this.findBuilds(this.currentPage,this.pageSize);
                        // 关闭 dialog
                        this.dialogVisible = false;
                    }

                })
            },
            //修 改
            // index 是下标
            // row 是 一行数据
            handleEdit(index, row){
                //查询数据库 进行回显
                this.findBuildById(row.id);

                // 模态窗的展示
                this.dialogVisible = true;
            },

            // index 表
            // row   一整行的数据
            handleDelete(index,row){

                let id = row.id;
                //确认框的操作
                this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //发送ajax操作

                    axios({
                        method:"DELETE",
                        url:`http://localhost:8080/ssm/build/${id}`,
                    }).then(resp=>{
                        console.log(resp.data);
                        //1 . 判断
                        if (resp.data.code == 100000){
                            //2. 信息提示
                            this.$message({
                                message:"删除" + resp.data.msg,
                                type: 'success'
                            });
                        }
                        //3. 页面的刷新
                        this.findBuilds(this.currentPage,this.pageSize);
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

                console.log(row.id);
            },
            // 页面大小的触发函数
            handleSizeChange(val){
                console.log(val);
                //拿到当前的页面大小
                this.pageSize = val;
                //重新加载 数据
                this.findBuilds(this.currentPage,this.pageSize);
            },
            //当前页面变化触发的函数
            handleCurrentChange(val){
                console.log(val);
                this.currentPage = val;
                // 当前第几页发生了变化  重新加载数据
                this.findBuilds(this.currentPage,this.pageSize);
            },
            findBuilds(currentPage,pageSize){
                axios({
                    method:"GET",
                    url:"http://localhost:8080/ssm/build",
                    params:{
                        currentPage:currentPage,
                        pageSize:pageSize
                    }
                }).then(resp=>{
                    // console.log(resp.data);
                    // console.log(resp.data.data);
                    // console.log(resp.data.data.data);
                    this.builds = resp.data.data.data
                    this.total = resp.data.data.total;
                })
            },
            findBuildById(id){

                axios({
                    method:"GET",
                    url:`http://localhost:8080/ssm/build/${id}`,
                }).then(resp=>{
                    // 服务器给我们返回的数据
                    console.log(resp.data.data);
                    this.build = resp.data.data;
                })
            }
        },
        created(){
            this.findBuilds(1,2);
        }
    })
</script>

</body>
</html>